import styled from 'styled-components'
export const InfoWrapper = styled.div`
display: flex;
  .cover{
    width: 205px;
    height:204px;
    background-position:-140px -580px;  
    position: relative;
    img{
      position: absolute;
      width: 140px;
      border-radius:50%;
      top:33px;
      left:33px;
    }
  }
  .right{
    margin-left:20px;
    .name{
     .icon{
      display: inline-block;
      width: 54px;
      height: 26px;
      background-position: 0 -463px;
     }
     .song_name{
      font-size:24px;
      color:#333;
      margin-left:15px;
     }
    }
    .artist,.album{
      margin:5px 0;
    }
    .artist_name,.album_name{
      color:#0C73C2;
      margin-left:10px;
    }
    .controls{
      display: flex;
      .btn{
        height:31px;
        border:1px solid #ccc;
        border-radius:5px;
        .icon{
          display: inline-block;
          width: 10px;
        }
      }
      .play{
        width: 80px;
        background-color:rgb(56,109,185);
        color:#fff;
      }
      .add{
        margin-left:-5px;
        background-color:rgb(56,109,185);
        color:#fff;
      }
      .collect,.share,.download{
        width: 54px;
        margin-left:10px;
      }
    }
   .show{
     cursor: pointer;
     margin-top:10px;
   }
  }
`
export const LyricWrapper = styled.div`

  margin-top:20px;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp:${props => props.isShow ? 'none':'9'};
  -webkit-box-orient: vertical;
  .item{
    padding:2px 0;
  }
`